<template>
  <div class="index-container">
    <el-row :gutter="15">
      <el-col
        v-if="nodeEnv !== 'development'"
        :xs="24"
        :sm="24"
        :md="24"
        :lg="24"
        :xl="24"
      >
        <!-- <el-alert
          title="作者初衷：iView Pro要卖￥9999，layui Admin要卖￥2600，作者只好自己动手写一个分享给大家咯。。。框架能走到今天更多的应该感谢巨人给了我肩膀依靠，鸣谢尤雨溪、饿了么、唐金州、花裤衩（毕业时掘金还有github上给过我很多鼓励，不知道他看到时还会不会想起我）、贤心、ivew的开源项目给我带来的很多的灵感（借鉴、抄袭、灵感每个人都可以有自己的见解，但请你尊重别人的劳动成果，不要一棒子打死），弱小的人才习惯嘲讽与否定，内心强大的人从不吝啬赞美与鼓励，人生在世，得到每个人的认可几乎是痴心妄想（有时候借鉴别人也是错，从头造轮子也是错，我尽量让每个人满意，我只知道无论何种评价，赞美或者抹黑，只要帮助到大家，我就是快乐的），我也只是一条略懂前端的咸鱼，可我仍一直怀揣着改变世界的梦想，希望我们每个人，不管过程怎样，结局都是美好的。。。"
          :closable="false"
        > -->
        <!-- <a
            target="_blank"
            href="https://github.com/chuzhixin/vue-admin-beautiful"
          >
            <img
              style="height: 100%;"
              src="https://img.shields.io/github/stars/chuzhixin/vue-admin-beautiful?style=social"
            />
          </a>
        </el-alert> -->
        <br>
      </el-col>
      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="6"
        :xl="6"
      >
        <el-card shadow="never">
          <div slot="header">
            <span>访问量</span>
          </div>
          <vab-chart
            :autoresize="true"
            theme="vab-echarts-theme"
            :options="fwl"
          />
          <div class="bottom">
            <span>日均访问量:

              <vab-count
                :start-val="config1.startVal"
                :end-val="config1.endVal"
                :duration="config1.duration"
                :separator="config1.separator"
                :prefix="config1.prefix"
                :suffix="config1.suffix"
                :decimals="config1.decimals"
              />
            </span>
          </div>
        </el-card>
      </el-col>
      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="6"
        :xl="6"
      >
        <el-card shadow="never">
          <div slot="header">
            <span>操作数</span>
          </div>
          <vab-chart
            :autoresize="true"
            theme="vab-echarts-theme"
            :options="sqs"
          />
          <div class="bottom">
            <span>总操作数:
              <vab-count
                :start-val="config2.startVal"
                :end-val="config2.endVal"
                :duration="config2.duration"
                :separator="config2.separator"
                :prefix="config2.prefix"
                :suffix="config2.suffix"
                :decimals="config2.decimals"
              /></span>
          </div>
        </el-card>
      </el-col>
      <el-col
        :xs="24"
        :sm="24"
        :md="24"
        :lg="12"
        :xl="12"
      >
        <el-card shadow="never">
          <div slot="header">
            <span>词云</span>
          </div>
          <vab-chart
            :autoresize="true"
            theme="vab-echarts-theme"
            :options="cy"
            @zr:click="handleZrClick"
            @click="handleClick"
          />
          <div class="bottom">
            <span>词云数量:<vab-count
              :start-val="config3.startVal"
              :end-val="config3.endVal"
              :duration="config3.duration"
              :separator="config3.separator"
              :prefix="config3.prefix"
              :suffix="config3.suffix"
              :decimals="config3.decimals"
            /></span>
          </div>
        </el-card>
      </el-col>
      <el-col
        :xs="24"
        :sm="24"
        :md="24"
        :lg="16"
        :xl="16"
      >
        <el-card
          class="card"
          shadow="never"
        >
          <div slot="header">
            <span>反馈量/反馈处理量</span>
          </div>
          <vab-chart
            :autoresize="true"
            theme="vab-echarts-theme"
            :options="xsl"
          />
        </el-card>
      </el-col>
      <el-col
        :xs="24"
        :sm="24"
        :md="24"
        :lg="8"
        :xl="8"
      >
        <el-card
          class="card"
          shadow="never"
        >
          <div slot="header">
            <span>更新日志</span>
            <div style="float: right;">
              部署时间:{{ updateTime }}
            </div>
          </div>
          <table class="table">
            <tr>
              <td>首页</td>
              <td>基础功能已经完善</td>
            </tr>
            <tr>
              <td>信息管理</td>
              <td>基础功能已经完善</td>
            </tr>
            <tr>
              <td>三资管理</td>
              <td>基础功能已经完善</td>
            </tr>
            <tr>
              <td>发布管理</td>
              <td>基础功能已经完善</td>
            </tr>
            <tr>
              <td>群众意见处理</td>
              <td>已经完善</td>
            </tr>
            <tr>
              <td>管理员管理</td>
              <td>已经完善</td>
            </tr>
            <tr>
              <td>日志</td>
              <td>正在开发中</td>
            </tr>
            <tr>
              <td>基础功能</td>
              <td>信息的添加,修改,编辑,列表查看,简单信息筛选</td>
            </tr>
            <tr>
              <td>待开发</td>
              <td>信息导入导出，信息之间的关系展示，表格内查看信息详情...</td>
            </tr>
          </table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import VabChart from "@/plugins/echarts";
import VabCount from "@/plugins/vabCount";
import { dependencies, devDependencies } from "../../../package.json";
import { getList } from "@/api/changeLog";
import { getRepos, getStargazers } from "@/api/github";
import AppLink from "@/layouts/components/Link";
export default {
  name: "Index",
  components: {
    VabChart,
    VabCount,
    // eslint-disable-next-line vue/no-unused-components
    AppLink,
  },
  data() {
    return {
      updateTime: process.env.VUE_APP_UPDATE_TIME,
      nodeEnv: process.env.NODE_ENV,
      dependencies: dependencies,
      devDependencies: devDependencies,
      config1: {
        startVal: 0,
        endVal: this.$baseLodash.random(1000, 20000),
        decimals: 0,
        prefix: "",
        suffix: "",
        separator: ",",
        duration: 8000,
      },
      config2: {
        startVal: 0,
        endVal: this.$baseLodash.random(1000, 20000),
        decimals: 0,
        prefix: "",
        suffix: "",
        separator: ",",
        duration: 8000,
      },
      config3: {
        startVal: 0,
        endVal: this.$baseLodash.random(1000, 20000),
        decimals: 0,
        prefix: "",
        suffix: "",
        separator: ",",
        duration: 8000,
      },

      //访问量
      fwl: {
        grid: {
          top: "4%",
          left: "2%",
          right: "4%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["0时", "4时", "8时", "12时", "16时", "20时", "24时"],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "访问量",
            type: "line",
            data: [10, 52, 20, 33, 39, 33, 22],
            smooth: true,
            areaStyle: {},
          },
        ],
      },
      //授权数
      sqs: {
        grid: {
          top: "4%",
          left: "2%",
          right: "4%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            /*boundaryGap: false,*/
            data: ["0时", "4时", "8时", "12时", "16时", "20时", "24时"],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "授权数",
            type: "bar",
            barWidth: "60%",
            data: [10, 52, 20, 33, 39, 33, 22],
          },
        ],
      },
      //词云
      cy: {
        grid: {
          top: "4%",
          left: "2%",
          right: "4%",
          bottom: "0%",
        },
        series: [
          {
            type: "wordCloud",
            gridSize: 15,
            sizeRange: [12, 40],
            rotationRange: [0, 0],
            width: "100%",
            height: "100%",
            textStyle: {
              normal: {
                color() {
                  const arr = [
                    "#1890FF",
                    "#36CBCB",
                    "#4ECB73",
                    "#FBD437",
                    "#F2637B",
                    "#975FE5",
                  ];
                  let index = Math.floor(Math.random() * arr.length);
                  return arr[index];
                },
              },
            },
            data: [
              {
                name: "惠济区村(居)务监督平台",
                value: 15000,
              },
              {
                name: "信息管理",
                value: 10081,
              },
              {
                name: "三资管理",
                value: 9386,
              },

              {
                name: "发布管理",
                value: 6500,
              },
              {
                name: "群众意见建议处理",
                value: 6000,
              },
              {
                name: "管理员管理",
                value: 4500,
              },
              {
                name: "已处理反馈",
                value: 3800,
              },
              {
                name: "未处理反馈",
                value: 3000,
              },
              {
                name: "更新中",
                value: 2500,
              },
              {
                name: "日志",
                value: 2300,
              },
              {
                name: "行政村信息",
                value: 2000,
              },
              {
                name: "资产",
                value: 1900,
              },
              {
                name: "资源",
                value: 1800,
              },
              {
                name: "项目建设",
                value: 1700,
              },
              {
                name: "村会议",
                value: 1600,
              },
              {
                name: "村组织活动",
                value: 1500,
              },
              {
                name: "党组织活动",
                value: 1200,
              },
              {
                name: "村民信息",
                value: 1100,
              },
              {
                name: "户口迁移",
                value: 900,
              },
              {
                name: "党员发展",
                value: 800,
              },
              {
                name: "行政村补助",
                value: 700,
              },
              {
                name: "村告栏",
                value: 800,
              },
              {
                name: "学习园地",
                value: 9000,
              },
              {
                name: "阳光监督",
                value: 9200,
              },
            ],
          },
        ],
      },
      //销售量
      xsl: {
        grid: {
          top: "4%",
          left: "2%",
          right: "4%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "销售量",
            type: "line",
            data: [10, 52, 20, 33, 39, 33, 22, 10, 22, 23, 13, 29],
            smooth: true,
            areaStyle: {},
          },
          {
            name: "签单量",
            type: "line",
            data: [20, 12, 30, 23, 31, 13, 32, 12, 12, 13, 13, 29],
            smooth: true,
            areaStyle: {},
          },
        ],
      },
      //更新日志
      reverse: true,
      activities: [],
      //其他信息
      userAgent: navigator.userAgent,
      //卡片图标
      iconList: [
        {
          icon: "video",
          title: "XXX",
          link: "/vab/player",
          color: "#ffc069",
        },
        {
          icon: "table",
          title: "XXX",
          link: "/vab/table/comprehensiveTable",
          color: "#5cdbd3",
        },
        // {
        //   icon: "laptop-code",
        //   title: "XXX",
        //   link: "https://github.com/chuzhixin/vue-admin-beautiful",
        //   color: "#b37feb",
        // },
        {
          icon: "book",
          title: "XXX",
          link: "",
          color: "#69c0ff",
        },
        {
          icon: "bullhorn",
          title: "XXX",
          link: "",
          color: "#ff85c0",
        },
        {
          icon: "gift",
          title: "XXX",
          link: "",
          color: "#ffd666",
        },

        {
          icon: "balance-scale-left",
          title: "XXX",
          link: "",
          color: "#ff9c6e",
        },
        {
          icon: "coffee",
          title: "XXX",
          link: "",
          color: "#95de64",
        },
      ],
    };
  },
  created() {
    this.fetchData();
  },
  mounted() {},
  methods: {
    handleClick(e) {
      this.$baseMessage(`点击了${e.name},这里可以写跳转`);
    },
    handleZrClick(e) {},
    handleChangeTheme() {
      this.$baseEventBus.$emit("theme");
    },
    fetchData() {
    },
  },
};
</script>
<style lang="scss" scoped>
.index-container {
  ::v-deep {
    .el-card__body {
      .echarts {
        width: 100%;
        height: 140px;
      }
    }
  }

  .card {
    min-height: 395px;

    ::v-deep {
      .el-card__body {
        .echarts {
          width: 100%;
          height: 305px;
        }
      }
    }
  }

  .bottom {
    height: 40px;
    padding-top: 20px;
    margin-top: 5px;
    color: #595959;
    text-align: left;
    border-top: 1px solid $base-border-color;
  }

  .table {
    width: 100%;
    color: #666;
    border-collapse: collapse;
    background-color: #fff;

    td {
      position: relative;
      min-height: 20px;
      padding: 9px 15px;
      font-size: 14px;
      line-height: 20px;
      border: 1px solid #e6e6e6;

      &:first-child {
        width: 50%;
        text-align: right;
      }
    }
  }

  .icon-panel {
    text-align: center;
    cursor: pointer;

    svg {
      font-size: 40px;
    }

    p {
      margin-top: 20px;
    }
  }

  .bottom-btn {
    float: right;
    margin-top: 5px;

    button {
      margin: 5px 0 5px 10px;
    }
  }
}
</style>
